<template>
    <el-select v-model="selectValue"
               :multiple="myMultiple"
               collapse-tags
               @change="choose"
               :size="mysize"
               filterable
               style="width: 150px"
               placeholder="请选择"
               value="">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
    export default {
        name: "diySelect",
        props: ['optionData', 'multiple', 'size', 'propsValue'],
        computed: {
            selectValue: {
                get:function () {
                    return this.propsValue
                },
                set:function (val) {
                }

            },
            options:{
                get:function () {
                    return this.optionData
                },
                set:function () {

                }
            },

        },
        data() {

            return {
                mysize: this.size,
                myMultiple: this.multiple,

            }
        },
        methods: {
            choose(val) {
                this.$emit('choose', val);
            }
        },
    }

    /*  使用示例
     *
    * <template>
    <div>
        <diySelect
        :optionData="optionData"    //设置选项数据  下面有数据格式
        @choose="choose"     //绑定取值方法
        multiple            //复选就加上这个属性，单选就不加
        :propsValue="selectValue"       //需要给propsValue属性绑定值，在choose事件绑定的函数里给他赋值，这样才能选择，这样是为了在调用这个自定义组件的组件里可以清空他的选项记录
        size="small">  //设置尺寸      表格外用medium(默认)，表格内用small
        </diySelect>
    </div>
</template>
//js代码-----------
    export default {
        name: "invoicingPage",
        components:{
        },
        data(){
            return{
                selectValue:'',
                optionData:[{        //数据格式   可以动态改变optionData去设置选项
                    value:1,
                    label:'香蕉'
                },
                    { value:2,
                        label:'苹果'},
                    { value:3,
                        label:'榴莲'},],
            }
        },
        methods:{
            choose(val){
                this.selectValue=val;    //获取选项值  也可以通过设置selectValue去调整输入框显示的内容
                console.log(val);
            }
        }
    }
*/
</script>

<style scoped>

</style>